<template>
  <div class="home">
    <van-nav-bar :title="appName" />

    <router-view v-slot="{ Component }">
      <KeepAlive>
        <Transition mode="out-in">
          <component :is="Component" />
        </Transition>
      </KeepAlive>
    </router-view>

    <van-tabbar v-model="activeTabbar">
      <van-tabbar-item
        :icon="item.icon"
        v-for="item in tabbarData"
        :key="item.id"
        :name="item.id"
      >
        {{ item.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="tsx">
import { useAppStore } from "@/stores/index";
import { computed, ref, watch } from "vue";
import { useRouter } from "vue-router";

//
const router = useRouter();
const app = useAppStore();
const appName = computed(() => app.name);

const activeTabbar = ref("main");
watch(
  activeTabbar,
  () => {
    router.push({ name: activeTabbar.value });
  },
  { immediate: true }
);
const tabbarData = ref([
  {
    id: "main",
    name: "首页",
    icon: "home-o",
    path: "/main",
  },
  {
    id: "message",
    name: "消息",
    icon: "chat-o",
    path: "/message",
  },
  {
    id: "user",
    name: "用户",
    icon: "user-o",
    path: "/user",
  },
]);
</script>
